<template>
  <div class="con">
    <div v-if="carGoodsList.length !== 0">
      <van-swipe-cell v-for="item in carGoodsList" :key="item.id">
        <van-card
          :num="item.num"
          :price="item.sell_price"
          :title="item.title"
          :thumb="item.thumb_path"
        >
          <div slot="footer">
            <van-stepper
              v-model="item.num"
              min="1"
              integer
              @plus="plus(item.id)"
              @minus="minus(item.id)"
              step="1"
            />
          </div>
        </van-card>
        <template slot="right">
          <van-button
            @click="delGoods(item.id)"
            square
            type="danger"
            text="删除"
            style="height: 100%"
          />
        </template>
      </van-swipe-cell>
    </div>
    <div class="empty" v-if="carGoodsList.length === 0">
      <img src="../assets/images/cart_empty.png" />
      <p>购物车空空如也</p>
      <van-button type="info" size="mini" @click="$router.push('/goods/list')"
        >去逛逛</van-button
      >
    </div>
    <van-submit-bar :price="countMoney" button-text="提交订单" />
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
  created() {},
  computed: {
    ...mapState(['carGoodsList']),
    ...mapGetters(['countMoney'])
  },
  methods: {
    // 增加商品数量
    plus(sid) {
      const goodInfo = {
        id: sid + '',
        count: 1
      }
      this.$store.dispatch('addToCar', goodInfo)
    },
    // 减少商品数量
    minus(sid) {
      const goodInfo = {
        id: sid + '',
        count: 1
      }
      this.$store.dispatch('removeFromCar', goodInfo)
    },
    delGoods(id) {
      this.$dialog
        .confirm({
          title: '警告',
          message: '是否确认删除该商品？'
        })
        .then(() => {
          this.$store.dispatch('delToCar', id)
        })
        .catch(() => {
          this.$notify('取消删除')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.con {
  > div:nth-last-of-type(2) {
    margin-bottom: 50px;
  }
  .van-card {
    margin-top: 10px;
  }
}
.van-submit-bar {
  bottom: 50px;
  background-color: #eee;
}
.empty {
  color: #ccc;
  padding: 15px 0;
  text-align: center;
  img {
    width: 100px;
  }
}
</style>
